<template>
  <codemirror
    ref='myCm'
    class='myCm'
    :style="{fontSize: + ideFontSize + 'px', height: ideHeight + 'px'}"
    :value='code'
    v-model='code'
    :options='cmOptions'
    @change='codeChange'
    @ready='onReady'>
  </codemirror>
</template>

<script>
// cnpm install vue-codemirror@4.0.6
import { codemirror } from 'vue-codemirror'
// 基本样式
import 'codemirror/lib/codemirror.css'
import 'codemirror/theme/base16-dark.css'
// 代码提示
import 'codemirror/mode/sql/sql'
import 'codemirror/mode/python/python'
import 'codemirror/mode/clike/clike.js'
import 'codemirror/mode/htmlmixed/htmlmixed.js'
// 主题
import 'codemirror/theme/eclipse.css'
import 'codemirror/theme/blackboard.css'
import 'codemirror/theme/cobalt.css'
import 'codemirror/theme/ayu-mirage.css'
import 'codemirror/theme/juejin.css'
import 'codemirror/theme/duotone-light.css'
import 'codemirror/theme/mdn-like.css'
import 'codemirror/theme/paraiso-light.css'
import 'codemirror/theme/idea.css'
import 'codemirror/theme/material-darker.css'
// 光标行背景高亮，配置里面也需要styleActiveLine设置为true
import 'codemirror/addon/selection/active-line.js'
// 自动补全代码
import 'codemirror/addon/lint/lint.css'
import 'codemirror/addon/lint/lint.js'
import 'codemirror/addon/display/autorefresh'
import 'codemirror/addon/edit/closebrackets.js'
import 'codemirror/addon/hint/show-hint.js'
import 'codemirror/addon/hint/show-hint.css'
import 'codemirror/addon/hint/javascript-hint'
import 'codemirror/addon/hint/html-hint'
import 'codemirror/addon/hint/sql-hint'
import 'codemirror/addon/edit/closebrackets.js'
import 'codemirror/addon/edit/closetag.js'
import 'codemirror/addon/edit/matchtags.js'
import 'codemirror/addon/edit/matchbrackets.js'
// 代码折叠
import 'codemirror/addon/fold/foldgutter.css'
import 'codemirror/addon/fold/foldcode'
import 'codemirror/addon/fold/foldgutter'
import 'codemirror/addon/fold/brace-fold'
import 'codemirror/addon/fold/comment-fold'
import 'codemirror/addon/fold/markdown-fold'
import 'codemirror/addon/fold/xml-fold'
import 'codemirror/addon/fold/indent-fold'
// 搜索功能
import 'codemirror/addon/scroll/annotatescrollbar.js'
import 'codemirror/addon/search/matchesonscrollbar.js'
import 'codemirror/addon/search/match-highlighter.js'
import 'codemirror/addon/search/jump-to-line.js'
// 搜索弹出框
import 'codemirror/addon/dialog/dialog.js'
import 'codemirror/addon/dialog/dialog.css'
import 'codemirror/addon/search/searchcursor.js'
import 'codemirror/addon/search/search.js'
// 搜索匹配高亮
import 'codemirror/addon/search/match-highlighter'

export default {
  components: {
    codemirror
  },
  props: {
    // 编辑器高度
    ideHeight: {
      required: false,
      default: '80vh',
      type: String
    },
    // 设置编辑器字体大小
    ideFontSize: {
      required: false,
      default: 20,
      type: Number
    },
    // 设置代码主题
    ideTheme: {
      required: false,
      default: 'idea',
      type: String
    },
    // 设置代码模板
    codeTemplate: {
      required: false,
      default: '',
      type: String
    },
    // 设置语言
    codeMode: {
      required: false,
      default: 'text/x-python',
      type: String
    },
    // 是否开启只读
    readOnly: {
      required: false,
      default: false,
      type: Boolean
    }
  },
  name: 'BaseIDE',
  created() {
  },
  watch: {
    ideTheme(newTheme, oldTheme) {
      this.cmOptions.theme = newTheme
    },
    code() {
      this.$emit('getCodeAnswer', this.code)
    }
  },
  data() {
    return {
      value: true,
      code: this.codeTemplate,   // 代码模板
      cmOptions: {
        readOnly: this.readOnly,  // 只读模式
        mode: this.codeMode, // 代码模式 默认为python
        theme: this.ideTheme,  // 设置主题 默认为idea
        autofocus: true,    // 自动获取焦点
        autocorrect: true,  // 自动更正
        spellcheck: true,  // 拼写检查
        lint: true,  // 检查格式
        tabSize: 4, // 制表符
        indentUnit: 2, // 缩进位数
        lineNumbers: true, // 显示行号
        smartIndent: true, // 智能缩进
        autoCloseBrackets: true,
        lineWrapping: true,
        matchBrackets: true, // 自动突出显示匹配的括号
        styleActiveLine: true,//line选择是是否加亮
        // 代码折叠
        gutters: [
          'CodeMirror-lint-markers',
          'CodeMirror-linenumbers',
          'CodeMirror-foldgutter'
        ],
        hintOptions: { // 自定义提示选项
          completeSingle: false // 当匹配只有一项的时候是否自动补全
        },
        foldGutter: true, // 启用行槽中的代码折叠
        highlightSelectionMatches: {
          minChars: 2,
          trim: true,
          style: 'matchhighlight',
          showToken: false
        }
      },
      supportThemes: ['eclipse', 'idea', 'material-darker', 'blackboard', 'mdn-like', 'paraiso-light', 'base16-dark', 'cobalt', 'ayu-mirage', 'juejin', 'duotone-light']
    }
  },
  methods: {
    onReady(cm) {
      if (this.value) {
        cm.on('keypress', () => {
          cm.showHint({ completeSingle: false })
        })
      }
    },
    codeChange() {
      // 提交的时候才传值
    }
  }
}
</script>

<style scoped lang='less'>

::v-deep .CodeMirror {
  height: v-bind(ideHeight);
  width: 50vw;
}

</style>